<style scoped>
.red {
  color: #EE0A24;
}

.grey {
  color: #bbb;
}

.container {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>

<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">输入密码</p>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" autocomplete="off">
      </van-field>
      <div style="margin: 16px;">
        <van-button round block color="#F70D00" @click="login" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import {NavBar, Col, Row, Form, Field, Button} from 'vant';
import {requestToLogin} from "../../api/user";
import {mapMutations} from "vuex";

Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)

export default {
  name: "pwd",
  data() {
    return {
      password: '',
      tel: ''
    }
  },
  created() {
    this.tel = this.$route.params.tel
    console.warn("tel", this.$route.params.tel)
    this.$notify('由于后端没有接口，您暂时还需要输入密码');
  },
  methods: {
    ...mapMutations({
      changeLogin: 'user/changeLogin',
      changeActive: 'tabs/doActive'
    }),
    onSubmit(e) {
      console.log("提交", e)
    },
    back() {
      this.$router.back()
    },
    login() {
      requestToLogin({loginname: this.tel, password: this.password}).then(res => {
        // 由于密码输入错误，后端返回的数据没有data，可能解构失败，这里进行判断分治
        let {token, userid} = res.data.data ? res.data.data : res.data
        if (res.data.code == 200) {
          this.$toast({
            type: 'success',
            message: '登录成功'
          })
          this.changeLogin({token,userid})
          this.changeActive(0)
        } else {
          this.$notify("密码错误")
        }
      })
    }
  }
}
</script>